<template>
  <div>
    <!---搜索栏 -->
    <div>
      <el-input v-model="name" placeholder="请输入姓名" style="width: 300px; "/>
      <el-input v-model="num" placeholder="请输入学号" style="width: 300px; margin-left: 5px"/>
      <el-button style="margin-left: 5px" type="primary" @click="load">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle" > 搜索 </span>
      </el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset">
        <el-icon style="vertical-align: middle" >
          <RefreshLeft />
        </el-icon>
        <span style="vertical-align: middle"> 重置 </span>
      </el-button>
      <el-button style="margin-left: 5px" type="success" @click="handleAdd">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
    </div>
    <!---表单 -->
    <div style="margin:10px 0">
      <el-table :data="tableData" stripe border   @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="stu_Num" label="学号" ></el-table-column>
        <el-table-column align="center" prop="stu_Name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="grade" label="年级"></el-table-column>
        <el-table-column align="center" prop="class" label="班级"></el-table-column>
        <el-table-column align="center" prop="enrolled_time" label="入学时间"></el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话"></el-table-column>
        <el-table-column align="center" prop="address" label="家庭地址"></el-table-column>
        <el-table-column align="center" label="操作" width="180px">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-popconfirm
                style="margin: 5px"
                confirm-button-text='确定'
                cancel-button-text='算了'
                title="您确定删除吗？"
                @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!---分页组件 -->
    <div style="margin:10px 0">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 5, 10, 20,50]"
          large
          background
          layout="total, sizes,prev,pager,next,jumper"
          :total="50"
      />
    </div>
    <el-dialog title="学生信息"  v-model="dialogFormVisible" width="20%" >
      <el-form label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="form.stu_Num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.stu_Name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="form.grade" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入学时间">
          <el-input v-model="form.enrolled_time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Search, RefreshLeft, Plus,} from '@element-plus/icons-vue'
export default {
  name:'stu_Msg',
  components:{
    Search,
    RefreshLeft,
    Plus,
  },
  data() {
    return {
      name: '',
      num:'',
      pageNum: 2,
      pageSize: 10,
      total:50,
      multipleSelection: '',
      dialogFormVisible: false,
      form:{},

      tableData: [
        {
          stu_Num: '201901001',
          stu_Name: '李四',
          grade: '高一',
          class: '1班',
          enrolled_time: '2022.9.1',
          phone: '15454848xxx',
          address: 'axssass'
        },
        {
          stu_Num: '201901002',
          stu_Name: '张三',
          grade: '高一',
          class: '1班',
          enrolled_time: '2022.9.1',
          phone: '15711448xxx',
          address: 'axssass'
        },
        {
          stu_Num: '201901003',
          stu_Name: '王五',
          grade: '高一',
          class: '1班',
          enrolled_time: '2022.9.1',
          phone: '18745848xxx',
          address: 'sxsssass'
        },
      ],

    }
  },
  methods:{
    // 加载数据的接口
    // load(){
    //   service.get("/user/page",{
    //     params:{
    //       pageNum: this.pageNum,
    //       pageSize: this.pageSize,
    //       name: this.name,
    //     }
    //   }).then(res=>{
    //     this.tableData=res.data.records
    //     this.total=res.data.total
    //   })
    // },
    //删除的接口,用于删除某条单个信息
    // del(id) {
    //   service.delete("/file/" + id).then(res => {
    //     if (res.data.code === '200') {
    //       this.$message.success("删除成功")
    //       this.load()
    //     } else {
    //       this.$message.error("删除失败")
    //     }
    //   })
    // },
    //批量删除的接口，用于将左侧的选中数据一起删除
    // delBatch() {
    //   let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
    //   service.post("/role/del/batch", ids).then(res => {
    //     if (res.data) {
    //       this.$message.success("批量删除成功")
    //       this.load()
    //     } else {
    //       this.$message.error("批量删除失败")
    //     }
    //   })
    // },
    //保存添加的数据项到后台数据库里
    // save() {
    //   service.post("/role/save", this.form).then(res => {
    //     if (res.data) {
    //       this.$message.success("保存成功")
    //       this.dialogFormVisible = false
    //       this.load()
    //     } else {
    //       this.$message.error("保存失败")
    //     }
    //   })
    // },
    handleSelectionChange(val){
      this.multipleSelection.value = val
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
      //this.load()
    },
    handleEdit(row){
      this.form = row
      this.dialogFormVisible = true
    },
    reset() {
      this.name = ""
      this.num=""
      this.load()
    },
  }
}


</script>
